<template>
    <div>
        <canvas id="myChart2"></canvas>
    </div>
</template>
<script>

import Chart from 'chart.js'
export default {
    components: {

    },
    data () {
        return {
            chartdata: {
                labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                datasets: [{
                    label: 'Data1',
                    backgroundColor: [
                        'rgba(0, 0 ,255, 0.5)',
                        'rgba(255, 0 ,255, 0.5)',
                        'rgba(255, 255 ,0, 0.5)'
                        ],
                    yAxisID: 'y-axis-1',
                    data: [65, 59, 60, -81, 56, 10, 40, -22, 32, 54, 10, 30]
                }, {
                    label: 'Data2',
                    backgroundColor: 'rgba(255, 0 ,255, 0.5)',
                    yAxisID: 'y-axis-2',
                    data: [-35, 29, -10, 51, 86, 70, -20, 12, -62, 34, 50, 10]
                }]
            }
        }
    },
    mounted () {
        this.drawChart()
    },
    methods: {
        fillData () {
            this.$http.get(
            `${window.SITE_CONFIG['baseURL']}/demo/charts2/list`,
            {
                mode: 'no-cors',
                headers: {
                'Access-Control-Allow-Origin': '*',
                'Content-Type': 'application/json'
                },
                withCredentials: true,
                params: {
                'page': 1
                }
            }
            ).then(({data}) => {
                console.log(data)
            })
        },

        drawChart () {
            var ctx2 = document.getElementById('myChart2')
            /* eslint-disable no-new */
            new Chart(ctx2, {
                type: 'bar',
                data: this.chartdata,
                options: {
                    responsive: true,
                    title: {
                        display: true,
                        text: 'Chart.js'
                    },
                    scales: {
                        yAxes: [{
                            type: 'linear',
                            display: true,
                            position: 'left',
                            id: 'y-axis-1'
                        }, {
                            type: 'linear',
                            display: true,
                            position: 'right',
                            id: 'y-axis-2',
                            gridLines: {
                                // drawOnChartArea: false
                            }
                        }]
                    }
                }
            })
        }

    }
}
</script>
